<template>
  <div class="monitorTable">
    <ul class="tableColumns">
      <li class="listItem" v-for="(item, i) of state.columns" :key="i" :style="getColumnStyle(item)">
        {{ item.title }}
      </li>
    </ul>
    <vue3ScrollSeamless class="tableScrollWrap" :classOptions="{ step: 0.2 }" :dataList="state.dataSource" @click.capture="handleRowClick">
      <ul class="listWrap" v-if="state.dataSource && state.dataSource.length > 0">
        <li class="listItem" v-for="(item, i) of state.dataSource" :key="i">
          <p v-for="(child, index) in state.columns" :key="index" :style="getColumnStyle(child)" :data-source="JSON.stringify(item)">
            <template v-if="child.dataIndex === 'tm'">
              {{dayjs(item[child.dataIndex]).format('MM-DD HH:mm') }}
            </template>
            <template v-else-if="child.dataIndex === 'warnLevel'">
              <span v-if="item[child.dataIndex] =='1'" class="level color1">极高风险</span>
              <span v-if="item[child.dataIndex] =='2'" class="level color2">高风险</span>
            </template>
            <template v-else>{{ item[child.dataIndex] }}</template>
          </p>
        </li>
      </ul>
      <div class="emptyText" v-else>
        <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="暂无数据"/>
      </div>
    </vue3ScrollSeamless>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, onMounted } from 'vue';
  import { Empty } from 'ant-design-vue';
  import dayjs from "dayjs";
  import { getGlobalMap } from '@/components/GlobalMap';
  import { vue3ScrollSeamless } from "vue3-scroll-seamless";
  import { useStationDataStoreWithOut } from '@/store/modules/stationData';
  import { addMapWarningData } from './addMapWarningData.ts';
  import { getWarnmsgData } from '@/api/oneMap/baseData';

  const stationDataStore = useStationDataStoreWithOut();

  defineOptions({ name: 'MonitorTable' });

  const state = reactive({
    loading: false,
    columns: [
      { title: '站点名称', dataIndex: 'stnm', key: 'stcd', width: '140px', align: 'center' },
      { title: '时间', dataIndex: 'tm', key: 'tm', align: 'center' },
      { title: '预警级别', dataIndex: 'warnLevel', key: 'warnLevel', align: 'center' },
    ],
    dataSource: [],
  });

  // 计算属性来动态计算样式
  const getColumnStyle = (column) => {
    return {
      width: column.width || `${(100 / state.columns.length)}%`
    };
  };

  const getTableDataSource = async ()=> {
    state.loading = false;
    const paramData = {
      "pageNum": 0,
      "pageSize": 20,
      "startTime": dayjs().format('YYYY-MM-DD 00:00:00')
    }
    const warnmsgData = await getWarnmsgData(paramData);
    console.log(warnmsgData, 'warnmsgData');
    state.dataSource = warnmsgData.records;
    setTimeout(() => {
      addMapWarningData(warnmsgData.records);
    }, 500);
  }

  // 点击表格当前点击的行，弹窗过程线详情
  const handleRowClick = (event) => {
    const tableData = event.target.getAttribute('data-source');
    if (tableData) {
      const data = JSON.parse(tableData);
      stationDataStore.setStationData({ ...data, sttp: 'PP' });
      const globalMap = getGlobalMap();
      const view = globalMap.getView();
      view.animate({
        zoom: 16,
        center: [Number(data?.lgtd), Number(data?.lttd)]
      });
    }

  }

  onMounted(async() => {
    getTableDataSource();
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .monitorTable {
    width: 100%;
    height: 100%;
    max-width: 428px;
    .tableColumns {
      width: 100%;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(0deg, #eef7ff, #f3f6ff), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%) !important;
      li {
        width: 100%;
        padding: 8px 0px;
        text-align: center;
        color: #646566;
        border: transparent;
        border-image-source: linear-gradient(180deg, rgb(73 171 255 / 0%) 0%, rgba(255, 255, 255, 0.4) 100%) !important;
      }
    }
    .tableScrollWrap {
      width: 100%;
      height: calc(100% - 38px);
      min-height: 170px !important;
      overflow: hidden;
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
      ul.listWrap {
        width: 100%;
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
      }
      li.listItem {
        width: 100%;
        min-height: 32px;
        display: flex;
        align-items: center;
        color: #333;
        border-bottom: 1px solid;
        border-image-source: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
        p {
          padding: 8px 8px;
          width: 100%;
          color: #333;
          text-align: center;
        }
        &:hover {
          background: linear-gradient(180deg, rgba(239, 242, 250, 0) -2.74%, rgba(84, 156, 255, 0.21) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%) !important;
          cursor: pointer;
        }
      }
      ::v-deep(.ant-empty-description) {
        color: #fff;
      }
    }
    .level {
      display: inline-block;
      padding: 0px 6px;
      border-radius: 4px;
      color: #fff;
      font-size: 12px;
    }
    .color1 { background: #F62E08; }
    .color2 { background: #F88306; }
    .color3 { background: #F1DF0D; }
    .color4 { background: #0070FF; }
    .stationName {
      width: 90px;
      display: inline-block;
      vertical-align: middle;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .spanhtml {
      margin-left: 6px;
      position: absolute;
      top: 8px;
      ::v-deep(.greenText) {
        display: inline-block;
        color: green;
      }
      ::v-deep(.redText) {
        display: inline-block;
        color: red;
      }
      ::v-deep(.blueText) {
        display: inline-block;
        color: #0070ff;
      }
    }
  }
</style>
